<template>
    <div class="maincontent">
        <el-card class="box-card">
            <div class="breadcrumb" slot="header">
                <el-breadcrumb separator="/publicgoodlist">
                    <el-breadcrumb-item>公共区商品</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="boxtitle">
                <div class="title">
                    产品列表
                </div>
            </div>
            <div>
                <el-form :inline="true">
                    <el-form-item label="商品名称">
                        <el-input v-model="selfrom.goodsname" placeholder="商品名称"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="dosearch"><i class="el-icon-search"></i>筛选</el-button>
                    </el-form-item>

                </el-form>

            </div>
            <div v-loading="tableloading">
                <el-table :data="tableData" border>
                    <el-table-column label="图片" align="center" width="80">
                        <template scope="scope">
                            <div class="tableimg">
                                <img :src="scope.row.goods_imgs[0]" v-if="scope.row.goods_imgs.length">
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" align="center">
                        <template scope="scope">
                            <router-link :to="{name:'公共区商品详情',params:{id:scope.row.goods_id}}">
                                {{scope.row.goods_name}}
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类" align="center" prop="option_name">
                    </el-table-column>
                    <el-table-column label="上架状态" align="center">
                        <template scope="scope">
                            {{public_state[scope.row.public_state]}}
                        </template>
                    </el-table-column>

                    <el-table-column label="创建日期" align="center">
                        <template scope="scope">
                            {{datefromate(scope.row.createtime.time)}}
                        </template>
                    </el-table-column>

                </el-table>
                <div style="text-align: right;margin-top: 10px">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageCount" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
                    </el-pagination>
                </div>

            </div>
        </el-card>
    </div>
</template>
<script type="text/ecmascript-6">
    import until from "../until/until";
    import API from "../API";
    import merge from "../until/merge"

    import {
            mapState,
            mapActions
    } from 'vuex';
    export default {
        computed: {
            ...mapState({
                user: state => state.user
            })
        },

        data() {
            return {
                selfrom: {
                    goodsname: "",
                    state: "",
                    audit: ""
                },
                selactionfrom: {
                    goodsname: "",
                    state: "",
                    audit: ""
                },
                tableData: [],
                goodstate: until.goodstate,
                public_state: until.public_state,
                tableloading: false,
                page: {
                    pageSize: 10,
                    pageCount: 1,
                    totalCount: 0
                },
                allowpagechangeaction: true,
                ediitem: null,
                dialogTableVisible: false,
                remoteloading:false,
                selectstop:null,
                pinpailist:[]
            }
        },
        mounted() {
            this.initdata();
        },
        methods: {
            initdata() {
                this.tableloading = true;
                this.allowpagechangeaction = false;
                this.selfrom = merge({}, this.selfrom, this.selactionfrom);
                API.searchComProjectList({
                    goodsname: this.selactionfrom.goodsname,
                    goods_shelves: this.selactionfrom.state,
                    goods_audit: this.selactionfrom.audit,
                    pageCount: this.page.pageCount,
                    product_area: 0,
                    pageSize: this.page.pageSize
                }).then((res) => {
                    var json = res.data;
                    if (json.message == "success") {
                        this.tableData = json.productList;
                        this.page = json.page;

                    } else {
                        this.$message({
                            showClose: true,
                            message: '查询失败',
                            type: 'error'
                        });
                    }
                    setTimeout(() => {
                        this.allowpagechangeaction = true;
                    }, 150);
                    this.tableloading = false;
                }).catch(() => {
                    setTimeout(() => {
                        this.allowpagechangeaction = true;
                    }, 150);
                    this.tableloading = false;
                })

            },
            dosearch() {
                this.selactionfrom = merge({}, this.selactionfrom, this.selfrom);
                this.page.pageCount = 1;
                this.initdata();
            },
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.initdata()
            },
            handleCurrentChange(val) {
                if (this.allowpagechangeaction) {
                    this.page.pageCount = val;
                    this.initdata()
                }
            },
            showdialog(item) {
                this.ediitem = item;
                this.dialogTableVisible = true;
            },
            datefromate(item) {
                return until.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(item))
            },
            remoteMethod(query){
                if (query !== '') {
                    this.remoteloading = true;
                    API.queryBrandUser({
                        store_name:query,
                        pageCount:1,
                        pageSize:10
                    }).then((res)=>{
                        let json=res.data;
                        if (json.message=="success") {
                            this.pinpailist=json.infolist;
                        }

                        this.remoteloading=false;
                    }).catch(()=>{

                        this.remoteloading=false;
                    })
                }
            },
            ediprodu(goods_toshop,deleteflag){
                if (!goods_toshop&&!deleteflag){
                    return
                }
                API.updatePublicProductByCode({
                    goods_id:this.ediitem.goods_id,
                    deleteflag:deleteflag,
                    goods_toshop:goods_toshop,
                    goodsoptionjson:"[]"
                }).then((res)=>{
                    let json=res.data;
                    if (json.message=="success"){
                        this.$notify({
                            title: '成功',
                            message: '修改商品成功',
                            type: 'success'
                        });
                        this.dialogTableVisible=false;
                        this.initdata();

                    }else {
                        this.$notify({
                            title: '失败',
                            message: '修改商品失败',
                            type: 'error'
                        });
                    }
                }).catch(()=>{

                })

            },
            delprodu(item){
                this.$confirm('确定删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   this.ediitem=item;
                    this.ediprodu(null,"1");
                }).catch(() => {

                });

            }

        },
        watch:{
            dialogTableVisible(newval){
                if (!newval) {
                    this.remoteloading=false;
                    this.selectstop=null,
                    this.ediitem= null;
                }
            }
        }
    }
</script>
<style lang="less">
    @import "../css/goodslist.less";
</style>
